<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公告管理</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
</head>
<body style="padding: 10px;">
	<!--  搜索条件开始 -->
	<form class="layui-form" method="post" id="searchFrm"
		lay-filter="searchFrm">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-inline">
					<input type="text" name="title" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">发布人</label>
				<div class="layui-input-inline">
					<input type="text" name="opername" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">内容:</label>
				<div class="layui-input-inline">
					<input type="text" name="content" autocomplete="off"
						class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">开始时间</label>
				<div class="layui-input-inline">
					<input type="text" id="startTime" name="startTime"
						readonly="readonly" class="layui-input" placeholder="请选择开始时间">
				</div>
				<label class="layui-form-label">结束时间</label>
				<div class="layui-input-inline">
					<input type="text" id="endTime" name="endTime" readonly="readonly"
						class="layui-input" placeholder="请选择结束时间">
				</div>
				<button type="button" class="layui-btn layui-icon layui-icon-search"
					lay-submit="" lay-filter="doSearch">查询</button>
				<button type="reset"
					class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
			</div>
		</div>
	</form>
	<!-- 搜索条件结束-->

	<!-- 数据表格开始 -->
	<table class="layui-hide" id="newsTable" lay-filter="newsTable"></table>
	<!-- 数据表格结束 -->
	<!-- 表格头部工具栏开始 -->
	<div style="display: none;" id="newsToolbar">
		<button type="button" class="layui-btn" lay-event="add">添加</button>
		<button type="button" class="layui-btn layui-btn-danger"
			lay-event="batchDelete">批量删除</button>
	</div>
	<!-- 表格头部工具栏结束 -->
	<!-- 表格行工具栏开始 -->
	<div style="display: none;" id="newsRowbar">
		<button type="button" class="layui-btn layui-btn-sm"
			lay-event="update">修改</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-warm"
			lay-event="showNews">查看</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger"
			lay-event="delete">删除</button>
	</div>
	<!-- 表格行工具栏结束 -->
	<!-- 添加和修改弹出层开始 -->
	<div style="display: none;" id="addOrUpdateDiv">
		<form class="layui-form" method="post" lay-filter="dataFrm"
			id="dataFrm">
			<div class="layui-form-item" style="margin: 10px;">
				<!-- id，隐藏域，修改时使用 -->
				<input type="text" name="id" hidden="">
				<div class="layui-block">
					<label class="layui-form-label">标题:</label>
					<div class="layui-input-block">
						<input type="text" name="title" placeholder="请输入标题"
							lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-block">
					<label class="layui-form-label">内容</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入公告内容" name="content" id="content" lay-filter="content"
							class="layui-textarea userDesc"></textarea>
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="margin: 10px; text-align: right;">
				<div class="layui-input-block">
					<button type="button"
						class="layui-btn layui-icon layui-icon-release" lay-submit=""
						lay-filter="doSubmit">保存</button>
					<button type="reset" id="dataFrmResetBtn"
						class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!--   添加和修改弹出层结束 -->
	<!--   查看公告弹出层开始 -->
	<div style="display: none; padding: 5px;" id="showNewsDiv">
		<h2 id="show_title" align="center"></h2>
		<div style="text-align: right; margin: 10px">
			<span>发布人:<span id="show_opername"></span></span>
			<span style="padding-left: 20px">发布时间:<span id="show_createtime"></span></span>
		</div>
		<hr style="height: 2px;">
		<div id="show_content" style="margin: 10px; padding: 10px; line-height: 25px;"></div>
	</div>
	<!-- 查看公告弹出层结束 -->
	<script src="${ctx}/resources/layui/layui.js"></script>
	<script>
		var tableIns;
		layui.use([ 'layer', 'table', 'form','laydate','layedit'], function() {
			var $ = layui.$;
			var layer = layui.layer;
			var table = layui.table;
			var form = layui.form;
			var laydate = layui.laydate;
			var layedit = layui.layedit;
			//初始化开始时间
			laydate.render({
			  elem: '#startTime'
			  ,type: 'datetime'
			});
			//初始化结束时间
			laydate.render({
			  elem: '#endTime'
			  ,type: 'datetime'
			});
			//初始化公告数据表格
			tableIns = table.render({
				elem : '#newsTable' 					//渲染的目标对象
				,url : '${ctx}/news/newsList.action' 	//数据接口
				,title : '系统公告表' 
				,toolbar : "#newsToolbar" 				//表头的工具条
				,height : "full-150"
				,page : true 							//是否启用分页
				,cols : [ [ 
						{type : 'checkbox',fixed : 'left'},
						{field : 'id',title : 'id',align : "center",width:"120"},
						{field : 'title',title : '标题',align : "center",width:"300"},
						{field : 'opername',title : '发布人',align : "center",width:"150"},
						{field : 'createtime',title : '发布时间',align : "center",width:"250"},
						{fixed : 'right',title : '操作',toolbar : "#newsRowbar",align : "center",width:"250"} 
						] ]
				,done : function(res, curr, count) {
					//回调函数
					//判断当前页码是否大于1
					if (curr > 1 && res.data.length == 0) {
						var pageValue = curr - 1;
						tableIns.reload({
							page : {
								curr : pageValue
							}
						});
					}
				}
			});
			//监听查询表单的提交
			form.on("submit(doSearch)", function(data) {
				tableIns.reload({
					where : data.field,
					page : {
						curr : 1
					}
				});
				return false;
			})
			//1. 监听头工具栏事件 
			table.on("toolbar(newsTable)", function(obj) {
				switch (obj.event) {
				case "add":
					openAddNews();
					break;
				case "batchDelete":
					batchDelete();
					break;
				}
			});
			//弹出层实例
			var mainIndex;
			//弹出层对应的提交url
			var url;
			//富文本编辑器实例
			//初始化富文本编辑器	//这里需要初始化，不然初始打开弹出层高度会有问题
			var editIndex = layedit.build("content");
			//打开添加系统公告弹出层
			function openAddNews() {
				mainIndex = layer.open({
					type : 1,
					title : "添加公告",
					content : $("#addOrUpdateDiv"),
					area : [ '700px' ],
					success : function(ayero, index) {
						//清空表单数据 jquery对象转dom对象，有reset函数
						$("#dataFrm")[0].reset();
						//初始化富文本编辑器 这里需要初始化，不然工具栏用不了
						editIndex = layedit.build("content");
						//清空富文本编辑器
						layedit.setContent(editIndex,"");
						//提交路径
						url = "${ctx}/news/addNews.action";
					}
				});
				
			}
			$("#dataFrmResetBtn").click(function(){
				layedit.setContent(editIndex,"");
			});
			
			//监听添加或修改用户弹出层的提交操作
			form.on("submit(doSubmit)", function(data) {
				//序列化表单数据
				if(layedit.getText(editIndex).trim().length == 0){
					layer.msg("正文内容不能为空！");
					return false;
				}
				//将富文本编辑器内容同步到textArea中
				layedit.sync(editIndex);
				var params = $("#dataFrm").serialize();
				$.post(url, params, function(result) {
					if (result.success) {
						//刷新数据表格
						tableIns.reload();
					}
					//显示响应提示信息
					layer.msg(result.message);
					//关闭弹出层
					layer.close(mainIndex);
				});
				//阻止表单提交
				return false;
			});
			
			//批量删除
			function batchDelete() {
				//获取当前选中行
				var checkStatus = table.checkStatus('newsTable');
				//判断是否有选中行
				var length = checkStatus.data.length;
				if (length > 0) {
					layer.confirm("确定删除这[ " + length + " 篇公告?",{icon : 3,title : "提示"},function(index) {
						var data = checkStatus.data;
						var params = "";
						$.each(data,function(i,item) {
							if (i == 0) {
								params += "ids=" + item.id;
							} else {
								params += "&ids=" + item.id;
							}
						});
						$.post("${ctx}/news/batchDeleteNewsByIds.action",params,function(result) {
							if (result.success) {
								//刷新数据表格
								tableIns.reload();
							}
							layer.msg(result.message);
						});
						//关闭提示框
						layer.close(index);
					});
				} else {
					layer.msg("请选择要删除的行!");
				}
			}
	
			//5. 监听行工具栏事件
			table.on('tool(newsTable)', function(obj) {
				var data = obj.data; //获得当前行数据
				switch (obj.event) {
				case 'update':
					openUpdateNews(data);
					break;
				case 'showNews':
					showNews(data);
					break;
				case 'delete':
					deleteNews(data);
					break;
				}
			});
			//打开修改用户弹出层
			function openUpdateNews(data) {
				mainIndex = layer.open({
					type : 1,
					title : "修改公告",
					content : $("#addOrUpdateDiv"),
					area : [ '700px'],
					success : function(ayero, index) {
						//回显表单
						form.val('dataFrm', data);
						//初始化富文本编辑器	这里需要初始化，不然工具栏用不了
						editIndex = layedit.build("content");
						//富文本编辑器回显
	                    layedit.setContent(editIndex,data.content);
						//提交路径
						url = "${ctx}/news/updateNews.action";
					}
				});
			}
	
			//删除公告
			function deleteNews(data) {
				layer.confirm("是否删除标题为 [" + data.title+ " ]的公告?", {"icon" : 3,"title" : "提示"}, function(index) {
					$.post("${ctx}/news/deleteNewsById.action", {"id":data.id}, function(result) {
						if (result.success) {
							//刷新数据表格
							tableIns.reload();
						}
						layer.msg(result.message);
					}, "json");
				});
			}
	
			//打开查看公告弹出层
			function showNews(data) {
				mainIndex = layer.open({
					type : 1,
					title : "查看公告",
					area : [ "800px", "500px" ],
					content : $("#showNewsDiv"),
					success : function() {
						$("#show_title").html(data.title);
	                    $("#show_content").html(data.content);
	                    $("#show_opername").html(data.opername);
	                    $("#show_createtime").html(data.createtime);
					}
				});
			}
		});
	</script>
</body>
</html>